<template>
  <div class="volvo-badge" :class="badgeClasses">
    <div class="volvo-badge__content">
      <slot></slot>
    </div>
    <div
      v-if="showBadge"
      class="volvo-badge__dot"
      :class="[dotClasses, typeClasses]"
      :style="badgeStyle"
    >
      {{ content }}
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  // 徽标类型：basic-基本圆点，number-带数值
  type: {
    type: String,
    default: 'basic',
    validator: (value) => ['basic', 'number'].includes(value)
  },
  // 徽标内容
  content: {
    type: [String, Number],
    default: ''
  },
  // 是否显示徽标
  show: {
    type: Boolean,
    default: true
  },
  // 徽标位置
  position: {
    type: String,
    default: 'top-right',
    validator: (value) => ['top-right', 'top-left', 'bottom-right', 'bottom-left'].includes(value)
  },
  // 最大值，超过最大值会显示 {max}+
  max: {
    type: Number,
    default: 99
  },
  // 自定义颜色
  color: {
    type: String,
    default: '#1c6bba'
  }
});

// 是否显示徽标
const showBadge = computed(() => props.show && (props.content || props.type === 'basic'));

// 徽标内容
const content = computed(() => {

  if (props.type === 'basic') return '';
  if (typeof props.content === 'number') {
    return props.content > 99 ? '99+' : props.content;
  }
  console.log("---",props.content);

  return props.content;
});

// 徽标样式
const badgeStyle = computed(() => ({
  backgroundColor: props.color
}));

// 徽标类名
const badgeClasses = computed(() => ({
  'volvo-badge--fixed': true,
  [`volvo-badge--${props.position}`]: true
}));

// 圆点类名
const dotClasses = computed(() => ({
  'volvo-badge__dot--basic': props.type === 'basic'
}));

// 类型类名
const typeClasses = computed(() => ({
  'volvo-badge__dot--number': props.type === 'number'
}));
</script>

<style lang="scss" scoped>
.volvo-badge {
  position: relative;
  display: inline-block;

  &--fixed {
    .volvo-badge__dot {
      position: absolute;
      transform: translate(50%, -50%);
      transform-origin: 100% 0%;
      white-space: nowrap;
    }
  }

  &--top-right {
    .volvo-badge__dot {
      top: 0;
      right: 0;
    }
  }

  &--top-left {
    .volvo-badge__dot {
      top: 0;
      left: 0;
      transform: translate(-50%, -50%);
      transform-origin: 0% 0%;
    }
  }

  &--bottom-right {
    .volvo-badge__dot {
      bottom: 0;
      right: 0;
      transform: translate(50%, 50%);
      transform-origin: 100% 100%;
    }
  }

  &--bottom-left {
    .volvo-badge__dot {
      bottom: 0;
      left: 0;
      transform: translate(-50%, 50%);
      transform-origin: 0% 100%;
    }
  }
}

.volvo-badge__dot {
  box-sizing: border-box;
  color: #fff;
  text-align: center;
  background-color: #1c6bba;
  transition: all 0.3s;

  &--basic {
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }

  &--number {
    padding: 0 6px;
    font-size: 12px;
    line-height: 1.2;
    border-radius: 16px;
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
